<html>
	<head>
		<title>OPD Record List</title>
		<link rel = "stylesheet" href = "style.css">
		<script src = "jquery-1.11.0.js"></script>
		<script src = "gen.js"></script>

		<center>

		<script>
		var globID;
		var delID;

			function syncAjax(x){
				var obj = $.ajax({url:x,async:false});
				return $.parseJSON(obj.responseText);
			}

			//Function to edit an OPD Record entry
			function edit(id){
				cancel();
				var r = get_opd_record(id);

				if(r.result == 0){
					document.getElementByID("divStatus").innerHTML = r.message;
					return;
				}

				//Storing the data from "r" into the form created
				$("#community_member_id").prop("value", r.opd_record.community_member_id);
				$("#opd_case_id").prop("value", r.opd_record.opd_case_id);

				if(r.opd_record.record_type == "NEW_CASE"){
					document.getElementById("rec_type_one").checked = true;
				}
				else{
					document.getElementById("rec_type_two").checked = true;
				}

				$("#idcho").prop("value", r.opd_record.idcho);
				$("#note").prop("value", r.opd_record.note);

				//Store the mouse coordinates where clicked
				var y = event.clientY;
				var x = event.clientX/1.5;

				//Utilize above variables with x,y coordinates to place the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				$("#divEdit").fadeIn(500);

				globID = id;
			}

			//Function to get the details for a specific OPD Record
			function details(id){
				cancel();
				var r = get_opd_record(id);

				if(r.result == 0){
					document.getElementByID("divStatus").innerHTML = r.message;
					return;
				}

				$("#record_id").prop("value", r.opd_record.record_id);
				$("#det_community_member_id").prop("value", r.opd_record.community_member_id);
				$("#det_community_member_name").prop("value", r.opd_record.community_member_name);
				$("#det_opd_case_id").prop("value", r.opd_record.opd_case_id);
				$("#det_record_type").prop("value", r.opd_record.record_type);
				$("#det_idcho").prop("value", r.opd_record.idcho);
				$("#det_cho_name").prop("value", r.opd_record.cho_name);
				$("#det_note").prop("value", r.opd_record.note);

				var y = event.clientY;
				var x = event.clientX/1.5;

				$("#divDetails").css("top", y);
				$("#divDetails").css("left", x);
				$("#divDetails").fadeIn(500);
			}

			//A function that gets the details of an OPD Record
			function get_opd_record(id){
				var x = "opd_record_action.php?cmd=1&id="+id;
				return syncAjax(x);
			}


			//A function to confirm deletion of an OPD Record
			function confirm_delete(id){
				cancel();
				var y = event.clientY;
				var x = event.clientX/1.2;

				//Utilize above variables with x,y coordinates to place the form
				$("#divDelete").css("top",y);
				$("#divDelete").css("left",x);
				$("#divDelete").fadeIn(500);
				delID = id;
			}


			//Function that actually deletes the OPD Record once confirmed
			function del(){
				var id = delID;
				var x = "opd_record_action.php?cmd=4&id="+id;

				cancel();
				window.location.replace("opd_record_list.php");

				var r = syncAjax(x);
			}

			//A function to create a new OPD Record
			function newRecord(){
				cancel();

				//Store the mouse coordinates where clicked
				var y = event.clientY+40;
				var x = event.clientX-170;

				//Utilize above variables with x,y coordinates to place the form
				$("#divNew").css("top",y);
				$("#divNew").css("left",x);

				$("#divNew").fadeIn(500);
			}

			//A function to save a newly created OPD Record
			function newRecSave(){
				var cmid = document.getElementById("new_community_member_id").value;
				var ocid = document.getElementById("new_opd_case_id").value;
				
				if(document.getElementById("new_record_type").checked)
					rt = 1;
				else
					rt = 2;

				var idc = document.getElementById("new_idcho").value;
				var n = document.getElementById("new_note").value;
				
				var x = "opd_record_action.php?cmd=5&cmid="+cmid+"&ocid="+ocid+"&rt="+rt+"&idc="+idc+"&n="+n;
				cancel();

				window.location.replace("opd_record_list.php");
				
				var r = syncAjax(x);
			}


			//Saves edits made to OPD Records
			function save(){
				var id = globID;
				var cmid = document.getElementById("community_member_id").value;
				var ocid = document.getElementById("opd_case_id").value;

				if(document.getElementById("rec_type_one").checked)
					rt = 1;
				else
					rt = 2;

				var idc = document.getElementById("idcho").value;
				var n = document.getElementById("note").value;

				var x = "opd_record_action.php?cmd=3&id="+id+"&cmid="+cmid+"&ocid="+ocid+"&rt="+rt+"&idc="+idc+"&n="+n;

				cancel();

				window.location.replace("opd_record_list.php");
				
				var r = syncAjax(x);	
			}

			//Hides all popup forms
			function cancel(){
				$("#divEdit").fadeOut(1000);
				$("#divDelete").fadeOut(1000);
				$("#divDetails").fadeOut(1000);
				$("#divNew").fadeOut(1000);
			}

		</script>
</head>
<body>
	<table bgcolor = "#f0f0f0">
		<tr>
			<td colspan = "3" id = "pageheader">
				Health Information System
			</td>
		</tr>

		<tr>
			<td id = "mainnav">
				<div class="menuitem">Location</div>
				<div class="menuitem">OPD Cases</div>
				<div class="menuitem">Health Promotion</div>
				<div class="menuitem">Nutrition</div>
				<div class="menuitem">Child Welfare</div>
				<div class="menuitem">Family Planning</div>
				<div class="menuitem" onclick = "location.href = 'logout.php'">Logout</div>
			</td>

			<td id = "content">
				<div id = "divPageMenu">
					<span class = "topmenuitem active">OPD Records</span>
					<span class = "topmenuitem"  onclick = "location.href = 'opd_case_list.php'">OPD Cases</span></a>
					
					<span class = "topmenuitem" onclick = "location.href = 'community_member_list.php'">Community Members</span></a>
					
					<span class = "topmenuitem" onclick= "location.href= 'birth_index.php'">Birth Records</span></a>
					
				</div>
				<div id = "divSearch" class = "search">
					<form name = "Search" action = "opd_record_list.php" method = "get" style = "margin:0;">
						<input type="number" id="numSearch" name = "search" placeholder = "Search by Member ID"> 
						<input type = "image" src = "searchicon.png" alt = "Search">
					</form>
				</div>
				<div id = "divStatus" class = "status">
					Status Info
				</div>

				<div id = "divContent">
					<center>OPD Record List</center>
					<table class = "reportTable" width = "100%">
						<tr class = "header">
							<td>Rec. ID</td>
							<td>Comm. Mem. ID</td>
							<td>Case ID</td>
							<td>Record Type</td>
							<td>Date</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>

	<?php
		include("opdClass.php");

		$obj = new opdClass();


		//If there is a search term
		if(isset($_REQUEST["search"])){
			$sid  = $_REQUEST["search"];

			//If the search term is invalid
			if(!$obj->opd_rec_search($sid)){
				echo ("<script>document.getElementById(\"divStatus\").innerHTML = \"<b class = 'error'>Invalid Search Term</b>"
					. "<a href = 'opd_record_list.php'><button style='float: right;'>Return</button></a>\";</script>");
			}

			//If the search term is valid
			else{	

				$row=$obj->fetch();

				//If no data is found
				if(!$row){
					echo ("<script>document.getElementById(\"divStatus\").innerHTML = \"No Results Found for Community Member: <b>"
					. $sid . "</b><a href = 'opd_record_list.php'><button style='float: right;'>Return</button></a>\";</script>");
					return;
				}

				//If data is found...
				else{
					echo ("<script>document.getElementById(\"divStatus\").innerHTML = \"Search Results for Community Member ID: <b>"
					. $sid . "</b><a href = 'opd_record_list.php'><button style='float: right;'>Return</button></a>\";</script>");
				}
				$row_counter=0;

				while($row){
					if($row_counter%2 == 0)
						$style = "class = 'row1'";
					else
						$style = "class = 'row2'";

					$id = $row["record_id"];

					echo "<tr $style>";
						echo ("<td> $id </td>");
						echo("<td>". $row["community_member_id"] . "</td>");
						echo("<td>". $row["opd_case_id"] . "</td>");
						echo("<td>". $row["record_type"] . "</td>");
						echo("<td>". $row["record_date"] . "</td>");
						echo("<td><span class = 'hotspot' onclick = 'edit($id)'>Edit</span></td>");
						echo("<td><span class = 'hotspot' onclick = 'details($id)'>Details</span></td>");
						echo("<td><span class = 'hotspot' onclick = 'confirm_delete($id)'><img src = 'deleteicon.png' alt = 'Delete'></span></td>");
					echo ("</tr>");

					$row = $obj->fetch();
					$row_counter++;	
				}
			}
		}

		//If there is no search term
		else{
			if(!$obj->get_opd_records()){
				echo "Error";
				exit();
			}

			$row=$obj->fetch();
			$row_counter=0;

			while($row){
				if($row_counter%2 == 0)
					$style = "class = 'row1'";
				else
					$style = "class = 'row2'";

				$id = $row["record_id"];

				echo "<tr $style>";
					echo ("<td> $id </td>");
					echo("<td>". $row["community_member_id"] . "</td>");
					echo("<td>". $row["opd_case_id"] . "</td>");
					echo("<td>". $row["record_type"] . "</td>");
					echo("<td>". $row["record_date"] . "</td>");
					echo("<td><span class = 'hotspot' onclick = 'edit($id)'>Edit</span></td>");
					echo("<td><span class = 'hotspot' onclick = 'details($id)'>Details</span></td>");
					echo("<td><span class = 'hotspot' onclick = 'confirm_delete($id)'><img src = 'deleteicon.png' alt = 'Delete'></span></td>");
				echo ("</tr>");

				$row = $obj->fetch();
				$row_counter++;	
			}
		}
			echo("</table></div></td></tr>");
	?>

	<tr><td colspan = "3" align = "center">
		</br></br>
		<div id = "newRecord" onclick="newRecord()" class = "button">
			New OPD Record
		</div>
	</td></tr>

	<tr><td colspan = "3">
		</br></br>
		<div id = "pagefooter">
			Created by: Nii Apa Abbey | Phyllis Treve | Alfred Gaglo | Chris Ampadu | Worlanyo Adrah
		</div>
	</td></tr>

</table>

	<!--Edit OPD Record PopUp-->
	<div id = "divEdit" class = "popupForm">
		<table>
			<tr>
				<th>Edit</th>
			</tr>
		</table>
		<table class = "tableForm">
			<tr>
				<td class = "label">Community Member ID: </td>
				<td class = "field"><input type = "number" value = "" id = "community_member_id"></td>
			</tr>
			<tr>
				<td class = "label">OPD Case ID: </td>
				<td class = "field"><input type = "number" value = "" id = "opd_case_id"></td>
			</tr>
			<tr>
				<td class = "label">Record Type: </td>
				<td class = "field">
					<input type = "radio" name = "rec_opt" id = "rec_type_one" value = "1">New Case
					<input type = "radio" name = "rec_opt" id = "rec_type_two" value = "2">Follow Up</td>
				</td>
			</tr>
			<tr>
				<td class = "label">ID Chief Health Officer: </td>
				<td class = "field"><input type = "number" value = "" id = "idcho"></td>
			</tr>
			<tr>
				<td class = "label">Note: </td>
				<td class = "field"><input type = "text" value = "" id = "note"></td>
			</tr>
			<tr>
				<td align = "right"><input type = "button" value = "Save" onclick = "save()"></td>
				<td><input type = "button" value = "Cancel" onclick = "cancel()"></td>
			</tr>
		</table>
	</div>


	<!--Delete PopUp-->
	<div id = "divDelete" class = "popupForm">
		<table class = "tableForm">
			<tr class = "label"><th>Are you sure you want to delete?</th></tr>
		</table>
		<table class = "tableForm">
			<tr>
				<td><input type = "button" value = "Yes" onclick = "del()"></td>
				<td><input type = "button" value = "No" onclick = "cancel()"></td>
			</tr>
		</table>
	</div>


	<!--OPD Record Details PopUp-->
	<div id = "divDetails" class = "popupForm">
		<table>
			<tr>
				<th>Details</th>
			</tr>
		</table>
		<table class = "tableForm">
			<tr>
				<td class = "label">Record ID: </td>
				<td class = "field"><input type = "text" value = "" id = "record_id" readonly></td>
			</tr>
			<tr>
				<td class = "label">Community Member ID: </td>
				<td class = "field"><input type = "text" value = "" id = "det_community_member_id" readonly></td>
			</tr>
			<tr>
				<td class = "label">Community Member Name: </td>
				<td class = "field"><input type = "text" value = "" id = "det_community_member_name" placeholder = "No Name Yet" readonly></td>
			</tr>
			<tr>
				<td class = "label">OPD Case ID: </td>
				<td class = "field"><input type = "text" value = "" id = "det_opd_case_id" readonly></td>
			</tr>
			<tr>
				<td class = "label">Record Type: </td>
				<td class = "field"><input type = "text" value = "" id = "det_record_type" readonly></td>
			</tr>
			<tr>
				<td class = "label">ID Chief Health Officer: </td>
				<td class = "field"><input type = "text" value = "" id = "det_idcho" readonly></td>
			</tr>
			<tr>
				<td class = "label">CHO Name: </td>
				<td class = "field"><input type = "text" value = "" id = "det_cho_name" placeholder = "No Name Yet" readonly></td>
			</tr>
			<tr>
				<td class = "label">Note: </td>
				<td class = "field"><input type = "text" value = "" id = "det_note" readonly></td>
			</tr>
						
		</table>
		<input type = "button" value = "Done" onclick = "cancel()">
	</div>



	<!--New OPD Record PopUp-->
	<div id = "divNew" class = "popupForm">
		<table class = "tableForm">
			<tr>
				<td class = "label">Community Member ID: </td>
				<td class = "field"><input type = "number" value = "" id = "new_community_member_id"></td>
			</tr>
			<tr>
				<td class = "label">OPD Case ID: </td>
				<td class = "field"><input type = "number" value = "" id = "new_opd_case_id"></td>
			</tr>
			<tr>
				<td class = "label">Record Type: </td>
				<td class = "field">
					<input type = "radio"  name = "new_rec_opt" id = "new_record_type" checked = "yes" value = "1">New Case
					<input type = "radio" name = "new_rec_opt" value = "2">Follow Up</td>
			</tr>
			<tr>
				<td class = "label">ID Chief Health Officer: </td>
				<td class = "field"><input type = "number" value = "" id = "new_idcho"></td>
			</tr>
			<tr>
				<td class = "label">Note: </td>
				<td class = "field"><input type = "text" value = "" id = "new_note" placeholder = "Insert Note Here"></td>
			</tr>
			<tr>
				<td align = "right"><input type = "button" value = "Save" onclick = "newRecSave()"></td>
				<td><input type = "button" value = "Cancel" onclick = "cancel()"></td>
			</tr>
		</table>
	</div>



</center>
</body>
</html>